<template>
  <div class="content">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="ID" min-width="100">
      </el-table-column>
      <el-table-column prop="name" label="商品名称" min-width="100">
      </el-table-column>
      <el-table-column prop="province" label="售价" min-width="100">
      </el-table-column>
      <el-table-column prop="city" label="库存" min-width="100">
      </el-table-column>
      <el-table-column prop="address" label="新品" min-width="100">
      </el-table-column>
      <el-table-column prop="zip" label="人气" min-width="100">
      </el-table-column>
      <el-table-column prop="zip" label="上架" min-width="100">
      </el-table-column>
      <el-table-column prop="zip" label="排序" min-width="100">
      </el-table-column>
      <el-table-column prop="zip" label="操作" min-width="100">
        <template>
          <el-button type="primary">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.content {
  background-color: #0094ff;
  width: 100%;
}
</style>